<template>
    <div class="comment-wrapper">
      <div class="items">
        <div class="item" v-for="(item, index) in commentList" :key="'item'+index">
          <div class="left">
            <img :src="item.user.avatarUrl" alt="">
          </div>
          <div class="right">
            <div class="top">
              <span class="user">{{ item.user.nickname }}:</span>
              <span class="content">{{ item.content }}</span>
            </div>
            <div class="bottom">
              <div class="time">2016年9月18日</div>
              <div class="like-wrapper">
                <span>👍</span>({{ item.likedCount }})
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
    export default {
      data() {
        return {
          commentList: []
        };
      },
      async created() {
        let backData = await this.$axios.get(`/comment/hot?id=${this.$route.params.id}&type=0`);
        this.commentList = backData.data.hotComments;
      },
    }
  </script>
  
  <style scoped>
    @import "@/assets/css/comment.css";
  </style>